<template>
  <div class="historical_task_content flex-x flex-top w100">
    <TreeBox
      v-if="activeName !== tabs[2].name"
      @treeCheck="treeCheck"
      :treeData="deviceTreeData"
      ref="treeBox"
      :deviceToken.sync="deviceToken"
      v-init-screen-h="0"
      style="width: 18%; height: 100%"
    ></TreeBox>
    <dv-border-box-12
      :key="mixinBoderKey"
      :style="{
        width: activeName !== tabs[2].name ? '82%' : '100%',
        padding: '5px 15px 0 15px'
      }"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="item.name"
          :name="item.name"
          v-for="(item, index) in tabs"
          :key="index"
        >
          <component
            :activeName="activeName"
            :assignmentToken="assignmentToken"
            :deviceRow="deviceRow"
            :deviceToken="deviceToken"
            style="overflow: hidden"
            :key="componentId"
            v-init-screen-h="0"
            :is="item.comName"
          ></component>
        </el-tab-pane>
      </el-tabs>
    </dv-border-box-12>
  </div>
</template>

<script>
import TreeBox from "../deviceOperation/components/TreeBox.vue";

import { generateId } from "@/utils/index";
import { mixinOpenedKey } from "@/mixin/openedKey.js";
import { getAllParentNodes } from "../js/utils";

const TYPES = [
  {
    name: "历史任务查询",
    comName: "Task"
  },
  {
    name: "历史曲线查询",
    comName: "Curve"
  },
  {
    name: "历史报警查询",
    comName: "Warning"
  }
];
import { getChild } from "../js/utils";
import Curve from "./Curve/index.vue";
import Task from "./Task/index.vue";
import Warning from "./Warning/index.vue";
import { getDevicesV2Tree } from "@/api/deviceOperation";
import { mapGetters } from "vuex";
export default {
  mixins: [mixinOpenedKey],
  components: { Task, Curve, Warning, TreeBox },

  data() {
    return {
      componentId: "",
      tabs: TYPES,
      activeName: TYPES[0].name,
      assignmentToken: "",
      deviceRow: {
        name: "",
        deviceParentName: ""
      },
      treeData: []
    };
  },
  computed: {
    ...mapGetters(["deviceTreeData", "controlDeviceInfo"]),
    // 设备toekn
    deviceToken() {
      console.log("this.controlDeviceInfo :>> ", this.controlDeviceInfo);
      return this.controlDeviceInfo.token;
    }
  },
  async mounted() {
    // 获取左侧树结构设备信息  同步获取,之后的接口依赖于设备token
    await this.$store.dispatch("centralizedControl/getDevicesV2Tree");
    // await this.getDevicesV2Tree();
  },
  methods: {
    // 点击左侧树
    async treeCheck(val, node) {
      const { token } = node.data;
      const parentNodes = getAllParentNodes(this.deviceTreeData, token);
      const names = parentNodes.map(item => item.name).reverse();
      this.$store.commit("centralizedControl/setDeviceInfo", {
        ...node.data,
        deviceParentName: names.join("/")
      });
    },
    // tabs点击事件
    handleClick() {
      this.componentId = generateId();
    }
  }
};
</script>

<style lang="scss" scoped>
.historical_task_content {
  position: relative;
  color: #fff;
  padding: 0 20px 20px 20px;
  background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat
    100%;
  background-size: cover;

  /deep/ .el-tabs__header {
    margin-bottom: 4px;

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }
  }

  /deep/ {
    .el-tabs__item {
      color: #fff;
    }

    .el-tabs__item.is-active {
      color: #409eff;
    }

    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
  }
}
</style>
